<script setup>
import {ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

const user=ref({username:"",password:""});
const login=()=>{
  let data = qs.stringify(user.value);
  axios.post(BASE_URL+'/v1/users/login',data).then((response)=>{
    if (response.data.code===20000){
      let user = response.data.data;
      ElMessage.success('登录成功!');
      localStorage.setItem('user-id',JSON.stringify(user.id));
      localStorage.setItem('user-username',JSON.stringify(user.username));
      localStorage.setItem('user-nickname',JSON.stringify(user.nickname));
      localStorage.setItem('user-imgUrl',JSON.stringify(user.imgUrl));
      localStorage.setItem('user-token',JSON.stringify(user.token));
      localStorage.setItem('user-authorities',JSON.stringify(user.authorities));
      location.href='/';
    }else ElMessage.error(response.data.message);
  })
}
</script>

<template>
  <div style="font-size: 50px;height: 250px;line-height: 250px">
    欢迎登录
  </div>
    <el-row class="row">
      <el-col :span="4">
        <div class="rowDiv">用户名</div>
      </el-col>
      <el-col :span="20">
        <el-input placeholder="请输入用户名" v-model="user.username" class="loginInput"/>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="4">
        <div class="rowDiv">密码</div>
      </el-col>
      <el-col :span="20">
       <el-input placeholder="请输入密码" type="password" v-model="user.password" class="loginInput"/>
      </el-col>
    </el-row>
    <div style="height: 30px">
      <el-row :gutter="10">
        <el-col :span="16">
          <div style="text-align: left">
            <router-link to="/patient/reg" class="loginRouterLink">
              还没有帐号?点击注册
            </router-link>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="text-align: right">
            <router-link to="/patient/forgotPassword" class="loginRouterLink">
              忘记密码
            </router-link>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-button @click="login()" class="login">登 &nbsp; &nbsp; 录</el-button>
</template>

<style scoped>
.loginRouterLink{
  text-decoration: none;
  color: #2ce;
}
.login{
  width: 300px;
  height: 60px;
  margin: 0 auto;
  font-size: 24px;
  font-family: 微软雅黑,sans-serif;
  color: #fff;
  border-radius: 30px;
  line-height: 60px;
  background-color: rgb(21,168,255);
}
.row{
  margin: 25px 0
}
.rowDiv{
  font-size: 25px;
  padding: 10px 0 0 30px;
  width: 100px
}
.loginInput{
  width:400px;
  height:60px;
  font-size: 25px;
}
</style>